{% extends 'base.html' %}
{% block title %}
{{current_semester}}课程表
{% endblock %}

{% block content %}
<div class="container-fluid mt-12 mb-12">
    <div class="card shadow-lg rounded-lg overflow-hidden">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">{{current_semester}}课程表</h4>
        </div>
      
        <div class="card-body p-4">
            <div class="mb-4">
                <div class="d-flex flex-wrap gap-2">
                {% if current_role == 'principal' %}
                        {%for grade in grades%}
                            <a href="{% url 'core:schedule_manager_grade_list' grade.id %}" {% if grade.id == grade_id %}active{% endif %} class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                                {{grade.name}}
                            </a>
                        {%endfor%}
                {% endif %}
                {% if current_role == 'grade_leader' %}
                        <a href="{% url 'core:schedule_manager_grade_list' managed_grade.id %}" class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard2-check me-2" viewBox="0 0 16 16">
                                <path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z"/>
                                <path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z"/>
                                <path d="M10.854 7.354a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
                            </svg>班级课程设置
                        </a>
                        <a href="{% url 'core:class_course_list' %}" class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check me-2" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
                                <path d="M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                            </svg>班级课程管理列表
                        </a>
                      <!-- 一键生成课程安排 -->
                       <a href="{% url 'core:generate_month_schedule' %}" class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-plus me-2" viewBox="0 0 16 16">
                                <path d="M8 7a.5.5 0 0 1 .5.5V9H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V10H6a.5.5 0 0 1 0-1h1.5V7.5A.5.5 0 0 1 8 7z"/>
                                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                            </svg>一键生成课程安排
                        </a>
                        <a href="{% url 'core:course_period_list' %}" class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock me-2" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                            </svg>设置课程时长
                        </a>
                {% endif %}
                {% if current_role == 'homeroom_teacher' %}
                        <a href="{% url 'core:schedule_manager_class_course_list' %}" class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square me-2" viewBox="0 0 16 16">
                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                                <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                            </svg>班级课程管理
                        </a>
                {% endif %}
                
                {% if current_role == 'teacher' %}
                    {% for class in classes %}
                        <a href="{% url 'core:schedule_manager_teacher_course_list' class.id %}" class="btn btn-outline-primary rounded-pill px-4 py-2 transition-all hover:bg-primary hover:text-white" onclick="event.preventDefault(); loadIframe(this.href);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book me-2" viewBox="0 0 16 16">
                                <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.955-.554-2.008-.959-3.12-.959-1.107 0-2.163.398-3.22 1.07a4.109 4.109 0 0 1-1.114-1.653V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.22-.956-1.063-.265-2.24-.376-3.286-.311V2.687z"/>
                            </svg>{{class}}
                        </a>
                    {% endfor %} 
                {% endif %}
                    
                </div>
               
            </div>
            <div class="bg-light rounded-lg border border-gray-200 p-2">
                <div class="embed-responsive embed-responsive-16by9 rounded">
                    <iframe id="scheduleFrame" class="embed-responsive-item w-100 h-100 border-0" style="min-height: 1000px;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function loadIframe(url) {
    const iframe = document.getElementById('scheduleFrame');
    // 显示加载状态
    iframe.src = 'about:blank';
    iframe.contentDocument.body.innerHTML = '<div class="d-flex flex-column justify-content-center align-items-center h-100"><div class="spinner-border text-primary" role="status"><span class="sr-only">加载中...</span></div><p class="mt-3 text-primary">正在加载课程表，请稍候...</p></div>';
    // 延迟设置src以确保加载状态显示
    setTimeout(() => {
        iframe.src = url;
    }, 300);
   
}

// 页面加载完成后自动加载第一个班级
document.addEventListener('DOMContentLoaded', function() {
    // 获取第一个班级链接
    const firstClassLink = document.querySelector('.btn-outline-primary');
    if (firstClassLink) {
        // 触发点击事件
        firstClassLink.click();
    }
});
</script>


{% endblock %}